第 11 屆 iThome 鐵人賽

DAY 6

Mobile Development

Flutter 程式設計入門實戰 30 天系列第 6 篇

Day 6：Container 大大容器

11th鐵人賽

HKT 線上教室

2019-09-21 08:05:45

8886 瀏覽

分享至

2024 最新 Flutter 教學－ Flutter 終極指南：連結
從零開始學 Dart 程式設計：連結
Flutter 程式設計入門實戰 30 天：連結

哈囉～大家好，我是 KT ，今天【iT邦幫忙鐵人賽】挑戰第六天，KT 將為大家來介紹，Container 容器佈局元件。Container 是 Flutter 用的最廣泛的的一個容器佈局元件。

Container 容器佈局，常用的屬性

child：可以設定一個子元件
color：背景顏色
alignment：對齊方式
constraints: 最大高度、最大寬度、最小高度、最小寬度
margin: 外部間距
padding: 內部間距

起手式

一開始基礎的畫面程式，在根據此篇主題，加入相關程式碼。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('HKT線上教室'),
      ),
      body: HomePage(),
    ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //↓↓↓更改此處程式碼↓↓↓
    return Container();
  }
}

widget 元件

flutter 一切萬物皆為 widget 元件，Text 文字標籤是 widget 元件、Button 按鈕是 widget 元件，Container 容器也是 widget 元件。

child 屬性

child：可以設定一個子元件屬性

範例：

在此範例，我們在 child 屬性，加入一個 Text 文字標籤元件，文字顯示「發大財」

Container(child: Text('發大財'))

執行畫面

color 屬性

color：設定背景顏色屬性。

範例，三種設定顏色值的方式：

設定背景色為紅色

Container(color: Colors.red)

使用 8 個 16 進制設定顏色

Container(color: Color(0xFFFF0000))

使用 ARGB 設定顏色 (A,R,G,B)，第一個欄位為 Alpha 透明度

Container(color: Color.fromARGB(255, 255, 00, 00))

執行畫面

alignment 屬性

alignment：設定對齊方式屬性。

範例：

新增一個 Text 文字元件，採用置中對齊

Container(
          alignment:Alignment.center,
          child: Text('發大財'),
          color: Colors.amber,
        )

執行畫面

Alignment 常數值

Alignment.bottomCenter：置底中間
Alignment.bottomLeft：左下角
Alignment.center：正中間
Alignment.centerLeft：置左邊中間
Alignment.centerRight 置右中間
Alignment.topCenter：正上方中間
Alignment.topLeft：左上角
Alignment.topRight：右上角

constraints 屬性

constraints: 設定最大高度、最大寬度、最小高度、最小寬度屬性。

範例：

透過 constraints 畫出一個正方形圖案。

Container(
          alignment: Alignment.center,
          color: Colors.amber,
          child: Text('發大財'),
          constraints: BoxConstraints(
              maxWidth: 300, maxHeight: 300, minWidth: 50, minHeight: 50),
        )

執行畫面

若要 Container 在畫面正中間，可以在 Container 外面新增一各 Center 置中佈局容器，將此 Container 設為此 Center 的子元件。

Center(
      child: Container(
          alignment: Alignment.center,
          color: Colors.amber,
          child: Text('發大財'),
          constraints: BoxConstraints(
              maxWidth: 300,
              maxHeight: 300,
              minWidth: 50,
              minHeight: 50)))

執行畫面

margin 屬性

margin: 設定外部間距屬性，透過 EdgeInsets 常數值來進行設定。

範例：

EdgeInsets.all()，一個值設定四邊的間距

Center(
        child: Container(
        alignment: Alignment.center,
        color: Colors.amber,
        child: Text('發大財'),
        margin: EdgeInsets.all(50),
      ))

執行畫面

EdgeInsets.only()，分別設定四邊的不一樣間距

Center(
        child: Container(
        alignment: Alignment.center,
        color: Colors.amber,
        child: Text('發大財'),
        margin: EdgeInsets.only(left: 50,top:10,right: 100,bottom: 10),
      ))

執行畫面

padding 屬性

padding: 設定內部間距屬性，和 margin一樣透過 EdgeInsets 常數值來進行設定。

範例：

EdgeInsets.only()，分別設定四邊的不一樣間距

Center(
        child: Container(
        color: Colors.amber,
        child: Text('發大財'),
        padding: EdgeInsets.only(left: 50,top:100,right: 100,bottom: 10),
      ))